<!DOCTYPE html>
<html>
<head>
  <title>parent_overflow_test.html</title>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot.dom.OverflowState');
    goog.require('bot.locators');
    goog.require('goog.testing.jsunit');
    goog.require('webdriver.ie');
  </script>
</head>
<body>
  <script>
    function dump(event) {
      var elt = event.target || event.srcElement;
      document.getElementById('clicked').innerHTML = elt.innerHTML;
    }

    function testScrollElementInToView() {
      var element = bot.locators.findElement({ id: 'line8' });
      assertEquals(bot.dom.OverflowState.SCROLL, webdriver.ie.isInParentOverflow(element));
      element.scrollIntoView(false);
      assertEquals(bot.dom.OverflowState.NONE, webdriver.ie.isInParentOverflow(element));

      // Verify scroll is correct for up and to the left.
      var element = bot.locators.findElement({ id: 'line1' });
      assertEquals(bot.dom.OverflowState.SCROLL, webdriver.ie.isInParentOverflow(element));
      element.scrollIntoView(false);
      assertEquals(bot.dom.OverflowState.NONE, webdriver.ie.isInParentOverflow(element));
    }
  </script>
  <div style="height: 150px"></div>
  <ul style="overflow: scroll; width: 150px; height: 80px; background-color: yellow" onclick="dump(event)">
    <li id="line1">line1</li>
    <li id="line2">line2</li>
    <li id="line3">line3</li>
    <li id="line4">line4</li>
    <li id="line5">line5</li>
    <li id="line6">line6</li>
    <li id="line7">line7</li>
    <li id="line8">line8</li>
    <li id="line9">line9</li>
  </ul>
  <div>
    Clicked: <span id="clicked"></span>
  </div>
</body>
</html>
